<template>
	<view class='werahouse'>
		<view class="header">
			<view class="box-item" :class="{'box-item-ative':item.id==tabIndex}" v-for='item in tabList' :key='item.id'
				@click='handleChange(item.id)'>
				{{item.name}}
			</view>
		</view>

		<view class="list-container">
			<scroll-list ref="list" :option="{
						page: WarehousePage.pageNum, // 分s页
						size: WarehousePage.pageSize, // 分页大小
						auto:false}" @load="e=>handleGetMyWarehousePage(1)" @refresh="e=>handleGetMyWarehousePage(2)">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="item-top">
						<image :src="tabIndex==1?item.imageUrl:item.coverUrl" class='goods_image' mode=""></image>
						<view class="item-top-left">
							<view class="left-title elliptical1">
								{{item.goodsName}}
							</view>
							<view class="left-price" v-if='tabIndex==1'>
								{{item.endPrice}}
							</view>
							<view class="left-info" v-if='tabIndex==1'>
								<view class="left-info-price">
									积攒金额：<span>￥{{item.availableBalance}}</span>
								</view>
								<view class='left-info-num'>
									可提数量：<span>{{Math.floor(item.availableBalance/item.endPrice)}}</span>
								</view>
							</view>

							<view class="num" v-if='tabIndex==2'>
								数量：<span>x{{item.quantity}}</span>
							</view>
						</view>
						<view class="stateOrder-defalut" v-if='tabIndex == 2'>
							<!-- 状态0待支付1待发货2已发货3已完成4已取消 -->
							{{item.state==0?'待支付':item.state==1?'待发货':item.state==2?'已发货':item.state==3?'已完成':'已取消'}}
						</view>
					</view>
					<view class="item-bottom" v-if='tabIndex == 1'>
						<view class="tihuoBtn" @click='handleTiHuoFun(3,item)'>
							提货券捐赠
						</view>
						<!-- <view class="tihuoBtn" @click='handleTiHuoFun(2,item)'>
							本金提货
						</view> -->
						<view class="benjinBtn" @click='handleTiHuoFun(1,item)'>
							提货券提货
						</view>

					</view>
				</view>
			</scroll-list>
		</view>


		<uni-popup ref='tihuo' :mask-click="false" type="bottom">
			<view class="tihuo-container">
				<image src="@/static/statc-icon/close.png" @click='closePopup' class='closeIcon' mode=""></image>
				<view class="headerPart">
					{{btnIndex==1?'提货券提货':'本金提货'}}
				</view>
				<addressComVue ref='addressCom' />
				<view class="content">
					<image :src="selectItem.imageUrl" class='goods_image_popup' mode=""></image>
					<view class="content_right">
						<view class="right_title elliptical2">
							{{selectItem.goodsName}}
						</view>
						<view class="right_price">
							{{selectItem.endPrice}}
						</view>
						<view class="right_info">
							快递包邮
						</view>
					</view>
				</view>

				<view class="tihuo_options">
					<view class="lable">
						可提货数量：
					</view>
					<view class='countNum'>
						<image src="@/static/statc-icon/image-5.png" @click='upDown(1)' class='option_btn' mode="">
						</image>
						<view class="numu">
							{{num}}
						</view>
						<image src="@/static/statc-icon/image-6.png" @click='upDown(2)' class='option_btn' mode="">
						</image>
					</view>
				</view>
				<view class="tihuo_options">
					<view class="lable">
						买家留言：
					</view>
					<view class='countNum'>
						<input class="uni-input" v-model='remark' placeholder="请输入备注" />
					</view>
				</view>
				<view class="splitLine" v-if='btnIndex==2'></view>
				<view class="payWay-benjin" v-if='btnIndex==2'>
					<radio-group @change="radioChange">
						<view class="payWayBox">
							<view class="label">
								多多券支付
							</view>
							<view class="value">
								<radio value="1" checked="true" borderColor="#151822" color="#fff"
									backgroundColor="#fff" activeBackgroundColor="#00C538" activeBorderColor="#00C538"
									style="transform:scale(1)" />
							</view>
						</view>
					</radio-group>

				</view>

				<view class="submit_tihuo" @click="isProp=true">
					{{btnIndex==1?'立即提货':'立即付款'}}
				</view>
			</view>
		</uni-popup>

		<uni-popup ref='juanzeng' :mask-click="false" type="bottom">
			
			<view class="juanzeng_content">
				<image src="@/static/static-home/image55.png" class='juanzengIcon' mode=""></image>
				<image src="@/static/statc-icon/close.png" @click='closePopup' class='closeIcon' mode=""></image>
				<view class="title">
					感谢您的公益捐赠，让这个世界有黑暗的地方多了一份光明！
				</view>
				<view class="content">
					<image :src="selectItem.imageUrl" class='goods_image_popup' mode=""></image>
					<view class="content_right">
						<view class="right_title elliptical1">
							{{selectItem.goodsName}}
						</view>
						<view class="right_price">
							积攒金额：<span>￥{{selectItem.availableBalance}}</span>
						</view>
					</view>


				</view>
				<view class="btnzhuan" @click='isProp= true'>
					立即捐赠
				</view>
			</view>
		</uni-popup>

		<passWordPopup :show='isProp' @close='isProp=false' @callBack="sure" />
	</view>
</template>

<script>
	import passWordPopup from '../../components/basicComponents/passWordPopup.vue'
	import {
		exchangeGoods,
		getMyWarehousePage,
		donateVoucher,
		myDeliveryOrder
	} from "@/api/api.js"
	import addressComVue from "../../components/basicComponents/addressCom.vue"
	import scrollList from "@/components/scroll-list/scroll-list.vue"
	export default {
		name: 'warehouse',
		data() {
			return {
				isProp: false,
				tabIndex: 1,
				tabList: [{
						id: 1,
						name: '仓库列表'
					},
					{
						id: 2,
						name: '已提商品'
					}
				],
				list: [],
				remark: '',
				num: 1,
				WarehousePage: {
					pageNum: 1,
					pageSize: 20,
				},
				selectItem: {},
				btnIndex: '',
			}
		},

		components: {
			scrollList,
			addressComVue,
			passWordPopup
		},
		onLoad(e) {
			
			if (e.tabIndex) {
				this.tabIndex = e.tabIndex
				this.handleGetMyWarehousePage(e.tabIndex)
			} else {
				this.handleGetMyWarehousePage(1)
			}

		},
		onShow() {
			this.$refs.addressCom ? this.$refs.addressCom.getAddressList() : ''
		},
		mounted() {

		},
		methods: {
			sure(password) {
				
				if( this.btnIndex == 1){
					this.handleSubmitOrder(password)
				}
				
				if(this.btnIndex == 3){
					this.handleJuanzeng(password)
				}
				

			},
			handleJuanzeng(password){
				
				donateVoucher({
					id:this.selectItem.id,
					payPassword:password
				}).then(res=>{
					// debugger
					console.log('payPassword',res)
					
					this.isProp = false
					this.$refs.juanzeng.close()
					// TODO: 有问题
					this.handleGetMyWarehousePage(2)
				})
			},
			handleSubmitOrder(password) {
				// 
				let paramer = {
					goodsId: this.selectItem.goodsId,
					quantity: this.num,
					addressId: this.$refs.addressCom.$data.addressId,
					remark: this.remark || '',
					payType: this.btnIndex == 1 ? 1 : 0, // 支付方式0多多券1提货券
					payPassword: password
				}
				exchangeGoods(paramer).then(res => {
					console.log('paramer'.res)
					if (res.code == 200) {
						this.isProp = false
						this.$refs.tihuo.close()
						uni.navigateTo({
							url: "/pages/mine/warehouse?tabIndex=2"
						})
					}
				})
			},
			upDown(index) {
				if (index == 1) {
					if (this.num > 0) {
						this.num--
					} else {
						this.num = 0
					}

				}

				if (index == 2) {
					this.num++
				}
			},
			closePopup() {
				this.$refs.tihuo.close()
				this.$refs.juanzeng.close()
			},
			handleTiHuoFun(type, item) {
				this.selectItem = item
				this.btnIndex = type
				if (type == 3) {
					this.$refs.juanzeng.open('bottom');
				} else {
					this.$refs.tihuo.open('bottom');
				}
				this.num = 1
				this.remark = ''
			},
			handleChange(id) {
				this.tabIndex = id
				this.handleGetMyWarehousePage(2)
			},
			handleGetMyWarehousePage(index) {

				if (index == 2) {
					this.list = []
					this.WarehousePage.pageNum = 1
				}

				let url = this.tabIndex == 1 ? getMyWarehousePage(this.WarehousePage) : myDeliveryOrder(this.WarehousePage)
				url.then(res => {
					this.WarehousePage.pageNum++;
					this.list = this.list.concat(res.data.records)
					this.loading = false

					if (index == 1) {
						// 加载
						this.$refs.list.loadSuccess({
							list: this.list,
							total: res.data.total
						});
					} else {
						// 刷新
						this.$refs.list.refreshSuccess({
							list: this.list,
							total: res.data.total
						});
					}
				})
			},
		}

	}
</script>

<style lang="less" scoped>
	page {
		background: #F6F6F7;
	}

	.werahouse {
		width: 100%;

		.header {
			width: 100%;
			height: 96rpx;
			background: #FFFFFF;
			box-shadow: inset 0px -2rpx 2rpx 0px rgba(199, 199, 199, 0.25);
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			margin-top: 20rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.box-item {
				font-weight: 400;
				font-size: 32rpx;
				color: #BCBDBD;
			}

			.box-item:last-child {
				margin-left: 40rpx;
			}

			.box-item-ative {
				font-weight: bold;
				font-size: 32rpx;
				color: #3C3C3C;
				position: relative;

			}

			.box-item-ative::after {
				content: '';
				width: 100%;
				height: 8rpx;
				background: #2DD800;
				position: absolute;
				bottom: -4rpx;
				left: 0;
			}
		}

		.list-container {
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.list-item {
				width: 710rpx;
				height: 272rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.item-top {
					display: flex;

					.goods_image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}

					.item-top-left {
						display: flex;
						flex: 1;
						margin-left: 20rpx;
						flex-direction: column;

						.num {
							font-weight: 400;
							font-size: 24rpx;
							color: #898989;

							span {
								font-weight: bold;
								color: #3C3C3C;
							}
						}




						.left-title {
							font-weight: 800;
							font-size: 28rpx;
							color: #3C3C3C;
							margin-bottom: 20rpx;
						}

						.left-price {
							font-weight: bold;
							font-size: 40rpx;
							color: #FF3C2D;
							margin-bottom: 36rpx;
						}

						.left-price:before {
							content: '¥';
							font-weight: bold;
							font-size: 20rpx;
							color: #FF3C2D;
						}

						.left-info {
							display: flex;

							.left-info-price {
								font-weight: 400;
								font-size: 24rpx;
								color: #898989;
								white-space: nowrap;

								span {
									color: #3C3C3C;
								}
							}

							.left-info-num {
								font-weight: 400;
								font-size: 24rpx;
								color: #898989;
								display: flex;
								white-space: nowrap;

								span {
									color: #3C3C3C;
								}
							}

							.left-info-num:before {
								content: '';
								width: 2rpx;
								height: 100%;
								background: #E7E7E7;
								display: inline-flex;
								margin: 0 20rpx;
								align-items: center;
							}
						}

					}



					.stateOrder-defalut {
						width: 104rpx;
						height: 40rpx;
						border-radius: 50rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #8D8D8D;
						background: #F7F7F7;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 30rpx;
					}

					.stateOrder-success {
						width: 104rpx;
						height: 40rpx;
						border-radius: 50rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #00A349;
						background: #F4FFF9;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 30rpx;
					}

					.stateOrder-complate {
						width: 104rpx;
						height: 40rpx;
						border-radius: 50rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FF2323;
						background: #FFF2F2;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 30rpx;
					}
				}

				.item-bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 20rpx;

					.tihuoBtn {
						width: 160rpx;
						height: 52rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						border: 2rpx solid #00C538;
						font-weight: 500;
						font-size: 28rpx;
						color: #00C538;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 96rpx;
						margin-right: 20rpx;

					}

					.benjinBtn {
						width: 160rpx;
						height: 52rpx;
						background: #27AE66;
						border-radius: 12rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;

						border-radius: 96rpx;
					}

				}
			}
		}

		.tihuo-container {
			width: 100%;
			min-height: 902rpx;
			max-height: 1036rpx;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0px 2px 2px 0px rgba(167, 167, 167, 0.25);
			position: relative;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;
			padding-bottom: 40rpx;

			.closeIcon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}

			.headerPart {
				width: 100%;
				height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 2rpx 0px rgba(167, 167, 167, 0.25);
				padding: 0 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 36rpx;
				color: #3C3C3C;
				border-top-right-radius: 50rpx;
				border-top-left-radius: 50rpx;
			}

			.address {
				width: 100%;
				height: 114rpx;
				background: #F9F9F9;
				padding: 0rpx 60rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;

				.addressIcon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				.info {
					margin-left: 16rpx;

					.name {
						margin-bottom: 5rpx;
						font-family: DengXian, DengXian;
						font-weight: bold;
						font-size: 28rpx;
						color: #3C3C3C;
						line-height: 32rpx;
					}

					.address_info {
						font-family: DengXian, DengXian;
						font-weight: 400;
						font-size: 28rpx;
						color: #6E6E6E;
						line-height: 48rpx;
					}
				}
			}

			.address:before {
				content: "";
				width: 30rpx;
				height: 34rpx;
				background: url("@/static/statc-icon/right.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 50%;
				bottom: 50%;
				right: 60rpx;
				transform: translateY(-50%);
			}

			.content {
				display: flex;
				padding: 40rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.goods_image_popup {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.content_right {
					display: flex;
					flex-direction: column;
					flex: 1;

					.right_title {
						font-weight: bold;
						font-size: 28rpx;
						color: #3C3C3C;
						line-height: 40rpx;
					}

					.right_price {
						font-weight: bold;
						font-size: 40rpx;
						color: #FF3C2D;
						margin-top: 20rpx;
						margin-bottom: 50rpx;
					}

					.right_price:before {
						content: '¥';
						font-weight: bold;
						font-size: 20rpx;
						color: #FF3C2D;
					}

					.right_info {
						font-weight: 500;
						font-size: 20rpx;
						color: #2E2E2E;
					}
				}

			}


			.tihuo_options {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 96rpx;

				margin: 0 40rpx;
				border-bottom: 2rpx solid #F9F9F9;

				.lable {
					font-weight: 500;
					font-size: 28rpx;
					color: #3C3C3C;
				}

				.countNum {
					display: flex;

					.option_btn {
						width: 48rpx;
						height: 48rpx;
					}

					.numu {
						width: 116rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.uni-input {
						text-align: right;
					}
				}
			}

			.submit_tihuo {
				width: 670rpx;
				height: 88rpx;
				background: #00C538;
				border-radius: 88rpx;

				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				margin-top: 100rpx;
			}


			.splitLine {
				width: 100vw;
				height: 12rpx;
				background: #F9F9F9;
			}

			.payWay-benjin {
				padding: 28rpx 40rpx;
				box-sizing: border-box;
			}

			.payWayBox {
				height: 72rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F9F9F9;
				justify-content: space-between;

				.label {
					font-weight: 500;
					font-size: 28rpx;
					color: #3C3C3C;
				}

				.value {}
			}
		}

	}

	.juanzeng_content {
		width: 100vw;
		height: 682rpx;
		background: #EBF9CE;
		padding-top: 110rpx;
		box-sizing: border-box;
		position: relative;
		border-top-right-radius: 50rpx;
		border-top-left-radius: 50rpx;

		.title {
			width: 610rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #949494;
			margin-bottom: 28rpx;
			margin: 0 auto;
		}

		.content {
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			background: #fff;
			width: 710rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			margin-top: 28rpx;

			.goods_image_popup {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.content_right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.right_title {
					font-weight: bold;
					font-size: 28rpx;
					color: #3C3C3C;
					line-height: 40rpx;
				}

				.right_price {
					font-weight: 400;
					font-size: 24rpx;
					color: #898989;
					margin-top: 20rpx;
					margin-bottom: 50rpx;
				}



				.right_info {
					font-weight: 500;
					font-size: 20rpx;
					color: #2E2E2E;
				}
			}

		}


		.btnzhuan {
			width: 670rpx;
			height: 88rpx;
			background: #00C538;
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			margin-top: 98rpx;
		}
		
		.juanzengIcon{
			width: 496rpx;
			height: 181.4rpx;
			position: absolute;
			top: -105rpx;
			left: 50%;
			right: 50%;
			transform: translateX(-50%);
		}
		.closeIcon {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 26rpx;
			right: 40rpx;
		}
	}
</style>